var photo = document.querySelector('.photo');
var pic = document.querySelector('.pic');
var circle_span = document.querySelectorAll('.circle span');
var value = 0;
var ln=0;
var int;
var a;

int = setInterval(function(){
    circle_span[ln].className = '';
    ln++;
    ln=ln%3;
    circle_span[ln].className = 'active';
    if(value==-512)value=256;
    value-=256;
    photo.style.backgroundPosition = value+'px '+' 0px';
    if(ln == 0){
        photo.style.transition = 'background-position 0s';
    }
    if(ln == 1){
        photo.style.transition = 'background-position 0.5s';
    }
},1000);
pic.onmouseout = function(){
    int = setInterval(function(){
        circle_span[ln].className = '';
        ln++;
        ln=ln%3;
        circle_span[ln].className = 'active';
        if(value==-512)value=256;
        value-=256;
        photo.style.backgroundPosition = value+'px '+' 0px';
        if(ln == 0){
            photo.style.transition = 'background-position 0s';
        }
        if(ln == 1){
            photo.style.transition = 'background-position 0.5s';
        }
    },1000);
}
pic.onmouseover = function(){
    clearInterval(int);
}

var leftButton = document.querySelector('.pic .leftButton');
var rightButton = document.querySelector('.pic .rightButton');
leftButton.onclick = function(){
    circle_span[ln].className = '';
    ln--;
    if(ln==-1)ln=2;
    circle_span[ln].className = 'active';
    if(value==0)value=-768;
    value+=256;
    photo.style.backgroundPosition = value+'px '+' 0px';
}
rightButton.onclick = function(){
    circle_span[ln].className = '';
    ln++;
    ln=ln%3;
    circle_span[ln].className = 'active';
    if(value==-512)value=256;
    value-=256;
    photo.style.backgroundPosition = value+'px '+' 0px';
}